<template>
  <div id="printPage">
    <label class="print-label">
      <span class="print-title">单号:</span>
      <span class="print-label_item">{{ formData.FNUMBER }}</span>
    </label>
    <label class="print-label">
      <span class="print-title">供应商:</span>
      <span class="print-label_item">{{ formData.FSUPPLIER }}</span>
    </label>
    <label class="print-label">
      <span class="print-title">付款方式:</span>
      <span class="print-label_item print-top">{{ formData.FPAYWAY }}</span>
    </label>
    <label class="print-label">
      <span class="print-title">付款金额:</span>
      <span class="print-label_item print-top">{{formData.FPAYMONEY ?  '￥' + formData.FPAYMONEY.toFixed(2) : "" }}</span>
    </label>
    <label class="print-label">
      <span class="print-title">创建人:</span>
      <span class="print-label_item print-top">{{ formData.FUSERID }}</span>
    </label>
    <label class="print-label">
      <span class="print-title">创建时间:</span>
      <span class="print-label_item print-top">{{ formData.FCREATEDATE.split(".")[0] }}</span>
    </label>
    <label class="print-label">
      <span class="print-title">审核情况:</span>
      <span class="print-label_item print-top">{{ formData.FAUDIT | filterFaudit }}</span>
    </label>
    <br>
    <label class="print-label" style="margin-top: 10px;">
      <span class="print-title">备注:</span>
      <span class="print-label_item print-top">{{ formData.FNOTE | filterNote }}</span>
    </label>

    <div style="margin-top: 30px;margin-left: 20px;">
      <table class="print-table">
        <thead>
        <th style="text-align: center;width: 40px;font-size: 14px;font-weight: normal;border-bottom: 1px solid black;">
          序号
        </th>
        <th style="text-align: center;width: 130px;font-size: 14px;font-weight: normal;border-bottom: 1px solid black;">
          验收入库单
        </th>
        <th style="text-align: center;width: 80px;font-size: 14px;font-weight: normal;border-bottom: 1px solid black;">
          类目树
        </th>
        <th style="text-align: center;width: 80px;font-size: 14px;font-weight: normal;border-bottom: 1px solid black;">
          件数
        </th>
        <th style="text-align: center;width: 80px;font-size: 14px;font-weight: normal;border-bottom: 1px solid black;">
          单据金额
        </th>
        <th style="text-align: center;width: 80px;font-size: 14px;font-weight: normal;border-bottom: 1px solid black;">
          未付金额
        </th>
        <th style="text-align: center;width: 80px;font-size: 14px;font-weight: normal;border-bottom: 1px solid black;">
          付款金额
        </th>
        </thead>
        <tbody>
        <tr v-for="(item,index) in tableData" :key="index">
          <td style="text-align: center;font-size: 12px;font-weight: normal;">{{ index + 1 }}</td>
          <td style="text-align: center;font-size: 12px;font-weight: normal;">{{ item.FISNUMBER }}</td>
          <td style="text-align: center;font-size: 12px;font-weight: normal;">{{ item.FCOUNT }}</td>
          <td style="text-align: center;font-size: 12px;font-weight: normal;">{{ item.FAMOUNT }}</td>
          <td style="text-align: center;font-size: 12px;font-weight: normal;">{{item.FORDERMONEY ? '￥' + item.FORDERMONEY.toFixed(2) : null}}</td>
          <td style="text-align: center;font-size: 12px;font-weight: normal;">{{ item.FAMOUNTPAYABLE ? '￥' + item.FAMOUNTPAYABLE.toFixed(2) : null }}</td>

          <td style="text-align: center;font-size: 12px;font-weight: normal;">{{item.FPAYABLE ? '￥' + item.FPAYABLE.toFixed(2) : null}}</td>

        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import print from 'print-js'

export default {
  name: "print",
  props: {
    formData: {
      type: Object,
    },
    tableData: {
      type: Array
    }
  },
  methods: {
    onPrint() {
      const style = '@page { margin:10mm 0 0 0;  } ' + '@media print {' +
        '.print-label_item{display: inline-block;width:260px;} ' +
        '.print-label{margin-left:20px;} ' +
        '.print-top{margin-top:10px;}' +
        '.print-textarea{display: inline-block;width:630px;} ' +
        '.print-title{width:70px;display: inline-block;}' +
        '.print-p{display: inline-block;width:260px;}' +
        '}';
      print({
        printable: "printPage",
        type: 'html',
        style: style,
        scanStyles: false,
      })
    },

  },
  filters: {
    filterFaudit(val) {
      let newVal = ""
      val == 0 ? newVal = "已审核" : newVal = "未审核"
      return newVal
    },
    filterNote(val) {
      let newVal = ""
      val ? newVal = val : newVal = "暂无"
      return newVal
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
#printPage {
  display: none;
}

@media print {
  #printPage {
    display: block;
    margin-top: 50px;
  }
}
</style>
